<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layuimini-master/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuimini-master/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户性别</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户城市</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户职业</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classify" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

         <div>
            <div  style="display:inline">
                <button class="layui-btn data-delete-btn layui-btn-danger">
                    {#                    <i class="layui-icon">&#xe640;</i>#}
                    全部删除
                </button>
            </div>


            <div class="layui-upload"  style="display:inline">
                <button type="button" class="layui-btn layui-btn-normal" id="selectFileId" name="selectFile">选择文件</button>
                <button type="button" class="layui-btn" id="startUploadId" name="startUpload">开始上传</button>

            </div>



            <div class="layui-upload"  style="display:inline">
                <button type="button" class="layui-btn layui-btn-normal" id="selectFileId2" name="selectFile2">选择文件 (firewall.xls)</button>
                <button type="button" class="layui-btn" id="startUploadId2" name="startUpload2">开始上传</button>

            </div>


            {#            <div class="layui-btn-group" style="display:inline">#}
            <div  style="display:inline">
                <button class="layui-btn data-init-btn layui-btn-warm" href="javascript:;" data-title="初始化" data-icon="fa fa-gears">
                    {#                    <i class="layui-icon">&#xe639;</i>#}
                    初始化
                </button>
            </div>
        </div>



        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">查看</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="/static/layuimini-master/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            upload = layui.upload,
            layuimini = layui.layuimini;

        table.render({
            elem: '#currentTableId',
            method: 'post',//数据传输方式为post
            url: '{% url 'get_domainDateList' %}',//数据获取url
            toolbar: '#toolbarDemo',
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[//设置列标签、标题、宽度、是否排序等
                {field: 'id', title: 'ID', width: 80, type: 'checkbox', sort: true},
                {field: 'originalId', title: '类别', width: 80,},
                {field: 'ipProtocol', title: '描述',},
                {field: 'rootId', title: '记录人',},
                {field: 'totDataBytes', title: '记录时间',},

                {field: 'srcDataBytes', title: 'ID', width: 80, sort: true},
                {field: 'dstDataBytes', title: '类别', width: 80,},
                {field: 'firstPacket', title: '描述',},
                {field: 'lastPacket', title: '记录人',},
                {field: 'srcIp', title: '记录时间',},

                {field: 'srcPort', title: 'ID', width: 80, sort: true},
                {field: 'dstIp', title: '类别', width: 80,},
                {field: 'dstPort', title: '描述',},
                {field: 'totPackets', title: '记录人',},
                {field: 'srcPackets', title: '记录时间',},


                {field: 'dstPackets', title: 'ID', width: 80, sort: true},
                {field: 'totBytes', title: '类别', width: 80,},
                {field: 'srcBytes', title: '描述',},
                {field: 'dstBytes', title: '记录人',},
                {field: 'node', title: '记录时间',},

                {field: 'uri', title: 'ID', width: 80, sort: true},
                {field: 'srcGEO', title: '类别', width: 80,},
                {field: 'dstGEO', title: '描述',},
                {field: 'subject', title: '记录人',},
                {field: 'src', title: '记录时间',},

                {field: 'dst', title: 'ID', width: 80, sort: true},
                {field: 'filename', title: '类别', width: 80,},
                {field: 'host', title: '描述',},
                {field: 'certificate', title: '记录人',},
                {field: 'channel', title: '记录时间',},


                {fixed: 'right', width: 200, toolbar: '#currentTableBar'},//设置每行的工具栏以及其容器
            ]]

        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {

            var index = layer.open({
                title: '添加用户',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: '/static/layuimini-master/page/table/add.html',
            });
            $(window).on("resize", function () {
                layer.full(index);
            });

            return false;
        });

        // 监听删除操作
        $(".data-delete-btn").on("click", function () {
            var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/static/layuimini-master/page/table/edit.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });






           //选完文件后不自动上传
   //指定允许上传的文件类型
  upload.render({
    elem: '#test3'
    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
    ,accept: 'file' //普通文件
    ,done: function(res){
      layer.msg('上传成功');
      console.log(res);
    }
  });






        //选完文件后不自动上传
        upload.render({
            elem: '#selectFileId',
            url: '{% url 'uploadDomain' %}',//数据获取url
            //url: '/domainManager/uploadDomain',
            auto: false,            //是否选完文件后自动上传
            //,multiple: true       //是否允许多文件上传
            bindAction: '#startUploadId',
            accept: 'file', //允许上传的文件类型
            {#,acceptMime: 'text/*'#}
            {#,size: 50 //最大允许上传的文件大小#}
            {#,before:function(obj){#}
            {#    obj.preview(function(index, file, result){#}
            {#        alert(file.name);#}
            {#    });#}

            before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            },

            done: function(res, index, upload){
                if (res.code == 0){
                    layer.closeAll('loading'); //关闭loading
                    layer.alert("上传成功");
                }
                if (res.code == 1){
                    layer.closeAll('loading'); //关闭loading
                    layer.alert("上传失败");
                }
            }
        });

    });



</script>


</body>
</html>